<template>
    <div class="fullscreen-container">
        <video-player 
            v-if="isSupported" 
            :src="hlsOptions.src" 
            :poster="posterImage" 
            controls 
            @ready="handleReady"
            @play="handlePlay" 
            @pause="handlePause" 
            @error="handleError" 
            :playback-rates="[0.5, 1.0, 1.5, 2.0]"
            crossorigin="anonymous" 
            playsinline 
            class="fullscreen-player"
            :fluid="true"
            :responsive="true"
        />
        <div v-else class="unsupported">
            您的浏览器不支持HLS播放，请使用Chrome/Firefox/Edge等现代浏览器
        </div>
        
        <!-- 全屏控制按钮 -->
        <div class="fullscreen-controls" v-if="isSupported">
            <button @click="toggleFullscreen" class="fullscreen-btn">
                <span v-if="!isFullscreen">进入全屏</span>
                <span v-else>退出全屏</span>
            </button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { VideoPlayer } from '@videojs-player/vue';
import 'video.js/dist/video-js.css';

// HLS流配置
const hlsOptions = reactive({
    src: "https://svipsvip.ffzy-online5.com/20250111/37063_d7cbbf83/index.m3u8",
    type: "m3u8"  // 必须显式指定HLS类型
});

// 浏览器支持状态 - 默认为true，让Video.js自己处理兼容性
const isSupported = ref(true);

// 全屏状态
const isFullscreen = ref(false);

// 封面图（可替换为实际封面URL）
const posterImage = ref("https://via.placeholder.com/800x450?text=视频加载中");

// 事件处理
const handleReady = (player) => {
    console.log('播放器准备就绪', player);
    // 可以在这里设置播放器的初始配置
};

const handlePlay = (event) => {
    console.log('视频开始播放', event);
};

const handlePause = () => {
    console.log('视频已暂停');
};

const handleError = (error) => {
    console.error('播放错误:', error);

    // 错误处理策略
    if (error && error.type === 'networkError') {
        console.warn('网络错误，尝试重连...');
        // 这里可添加重连逻辑
    } else if (error && error.type === 'mediaError') {
        console.error('媒体解码错误');
    } else {
        console.error('未知播放错误:', error);
    }
};

// 全屏功能
const toggleFullscreen = () => {
    const container = document.querySelector('.fullscreen-container');
    
    if (!isFullscreen.value) {
        // 进入全屏
        if (container.requestFullscreen) {
            container.requestFullscreen();
        }
    }
} 
</script>

<style scoped>
.video-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: #000;
}

.video-player {
    width: 100% !important;
    height: 450px !important;
    border-radius: 8px;
}

/* Video.js 样式优化 */
:deep(.vjs-big-play-button) {
    line-height: 2em;
    height: 2em;
    width: 2em;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.65);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

:deep(.vjs-control-bar) {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
}

/* 取消video被选中的白边 */
:deep(video:focus) {
    border: none !important;
    outline: none;
}

:deep(.vjs-tech) {
    border-radius: 8px;
}

/* 进度条配色 */
:deep(.video-js .vjs-load-progress div) {
    background: rgba(255, 255, 255, 0.55) !important;
}

:deep(.video-js .vjs-play-progress) {
    background: #44c8cf;
}

:deep(.video-js .vjs-slider) {
    background-color: hsla(0, 0%, 100%, .2);
}

.unsupported {
    padding: 2rem;
    text-align: center;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 8px;
    color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .video-container {
        width: 100%;
        margin: 0 10px;
    }

    .video-player {
        height: 250px !important;
    }
}
</style>